<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绑定房屋</title>
    <style>
        body {
            margin: 0;
            background-color: #eee;
            box-sizing: border-box;
        }

        .chunk {
            border: solid 1px #eee;
            background-color: white;
            display: flex;
            padding: 15px 10px;

        }

        .chunk-left {
            width: 30%;
        }

        .chunk-right {
            width: 70%;
            display: flex;
            justify-content: space-between;
            color: rgb(174, 175, 175);
        }

        .confirmBtn {
            width: 80%;
            height: 40px;
            line-height: 40px;
            background-color: #0057c8;
            text-align: center;
            margin: 30px auto;
            color: white;
            border-radius: 8px;
        }



        .shade {
            background-color: rgba(78, 77, 77, 0.2);
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
        }

        .shade-white {
            width: 100%;
            height: 60vw;
            background-color: white;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .shade-header {
            display: flex;
            /* width: 100%; */
            justify-content: space-between;
            padding: 15px 10px;
        }
        .select{
            width:100%;
            height:100%;
            font-size:16px;
            border:0px solid #000;
            background-color: #FFF;
        }
        .input{
            font-size:16px;
            border:0px solid #000;
            height:28px
        }
    </style>
</head>

<body>
    <form action="{:url('bind')}" method="post" onsubmit="return checkform()">
    <div style="margin-top: 50px">
        <div class="chunk"  >
            <div class="chunk-left">选择小区:</div>
            <div class="chunk-right">
                <select  class="select" onchange="getgroup()" id="community" name="community_id">
                    <option value="">请选择小区</option>
                    {volist name="community" id="vol"}
                    <option value="{$vol.community_id}">{$vol.community_name}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="chunk" >
            <div class="chunk-left">组团:</div>
            <div class="chunk-right">
                <select  class="select" onchange="getbuilding()" id="group">
                    <option value="">请选择组团</option>
                    
                </select>
            </div>
        </div>
        <div class="chunk">
            <div class="chunk-left">幢号:</div>
            <div class="chunk-right">
                <select  class="select" onchange="getunit()" id="building">
                    <option value="">请选择幢号</option>
                    
                </select>
            </div>
        </div>
        <div class="chunk">
            <div class="chunk-left">单元:</div>
            <div class="chunk-right">
                <select  class="select" onchange="getroomid()" id="unit">
                    <option value="">请选择单元</option>
                    
                </select>
            </div>
        </div>
        <div class="chunk" >
            <div class="chunk-left">房间号:</div>
            <div class="chunk-right">
                <select  class="select"  id="roomid" name="roomid">
                    <option value="">请选择房间号</option> 
                </select>
            </div>
        </div>
        
        <div class="chunk">
            <input type="submit" class="confirmBtn" value="确认"    style="margin:0 auto;"/>
        </div>
       

    </div> 
    </form>

</body>

</html>
<script src="static/index/js/jquery.js"></script>
<script>
    function getgroup(){
        var community=$("#community").val();
        $("#building").html("<option value=''>请选择幢号</option>");
        $("#unit").html("<option value=''>请选择单元</option>");
        $("#roomid").html("<option value=''>请选择房间号</option>");
        $.get("{:url('getgroup')}",{communityid:community},function(data){

            $("#group").html(data);
        },'html')
    }
    function getbuilding(){
        var community=$("#community").val();
        var group=$("#group").val();
        
        $("#unit").html("<option value=''>请选择单元</option>");
        $("#roomid").html("<option value=''>请选择房间号</option>");
        
        $.get("{:url('getbuilding')}",{communityid:community,group:group},function(data){
                $("#building").html(data);
        },'html')
    }
    function getunit(){
        var community=$("#community").val();
        var group=$("#group").val();
        var building=$("#building").val();
        
        $("#roomid").html("<option value=''>请选择房间号</option>");
       
        $.get("{:url('getunit')}",{communityid:community,group:group,building:building},function(data){
                $("#unit").html(data);
        },'html')
    }
    function getroomid(){
        var community=$("#community").val();
        var group=$("#group").val();
        var building=$("#building").val();
        var unit=$("#unit").val();
        $.get("{:url('getroomid')}",{communityid:community,group:group,building:building,unit:unit},function(data){ 
                $("#roomid").html(data);
                console.log(data);
        },'html')
    }
    //校验表单
    function checkform(){
        var roomid=$("#roomid").val();
        if(roomid==""){
            alert("请选择房间");
            return false;
        }
        return true;
    }
</script>